<!-- 历史影像切换 -->
<template>
  <!-- 底部底图影像、数据名称切换面板 -->
  <div
    :class="['bottom-tab-box', isShrink ? 'shrink' : '']"
    :style="
      !isShrink && allDataList.length > 4
        ? 'height: 265px;overflow-y: auto'
        : ''
    "
    v-show="mapServices.length > 1 || allDataList.length"
  >
    <el-scrollbar>
      <div class="bottom-tab">
        <div
          class="right-service__wrapper"
          v-show="mapServices.length > 1"
        >
          <div @click="mapOpenFun">
            <el-input
              placeholder="底图影像"
              disabled
              style="width: 110px; margin-right: 26px"
              v-show="mapServices.length > 1"
            >
            </el-input>
          </div>

          <!-- 底图影像切换 -->
          <div
            class="right-service"
            v-show="mapServices.length > 1"
          >
            <span
              class="left-right"
              @click="leftShow"
              v-show="
                mapServices.length > 4 && groupIndex !== 1
              "
              >&lt;</span
            >
            <div
              class="service-item"
              :class="
                activeService.pkid === item.pkid
                  ? 'active-item'
                  : ''
              "
              v-for="item in showServiceList"
              :key="item.pkid"
              @click="showService(item)"
            >
              <span>{{ item.serviceName }}</span>
            </div>
            <span
              class="left-right"
              @click="rightShow"
              v-show="
                mapServices.length > 4 &&
                groupIndex * 4 < mapServices.length
              "
              >&gt;</span
            >
          </div>
        </div>
        <div
          class="right-service__wrapper"
          v-for="(value, index) in allDataList"
          :key="index"
        >
          <div @click="openFun(index)">
            <el-input
              :placeholder="value.name"
              disabled
              style="width: 110px; margin-right: 26px"
            >
            </el-input>
          </div>
          <!-- 数据名称切换 -->
          <div class="right-service">
            <span
              class="left-right"
              @click="dataListLeftShow(value)"
              v-show="
                value.dataList.length > 4 &&
                value.currentPage !== 1
              "
              >&lt;</span
            >
            <div
              class="service-item"
              v-for="(item, index2) in value.showDataList"
              :key="item.pkid"
              :class="{
                'active-item':
                  item.pkid ===
                  value.dataList[value.currentIndex].pkid
              }"
              :disable="!item.serviceUrl"
              @click="dataClickHandle(item, index, index2)"
            >
              {{ item.serviceName }}
            </div>
            <span
              class="left-right"
              @click="dataListRightShow(value)"
              v-show="
                value.dataList.length > 4 &&
                value.dataList.length >
                  value.currentPage * 4
              "
              >&gt;</span
            >
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import New from '@/utils/new'
import { globalBaseMap } from '@/utils/basemap'

export default {
  props: {
    defaultViewId: {
      type: String,
      default: 'defaultViewId'
    }
  },
  data() {
    return {
      mapServices: [],
      activeService: {},
      allDataList: [],
      oldAllDataList: [],
      showServiceList: [],
      isShrink: true // 是否收缩tab
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    New.$on('mapIndex', (data) => {
      if (data.list.length && this.showServiceList.length) {
        this.activeService = data.active
        return
      }
      this.mapServices = data.list
      if (this.mapServices.length > 4) {
        this.showServiceList = [...this.mapServices].slice(
          0,
          4
        )
      } else {
        this.showServiceList = [...this.mapServices]
      }
      this.activeService = data.active
      if (this.mapServices.length > 1) {
        this.show = true
        this.showType = 1
      }
      if (
        this.mapServices.length === 0 &&
        this.selectLayerId
      ) {
        this.show = true
        this.showType = 0
      }
    })
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    showService(data) {
      if (data.pkid !== this.activeService.pkid) {
        globalBaseMap[
          this.defaultViewId
        ].switchHistoryImagery(data.pkid)
      }
    },
    rightShow() {
      if (this.mapServices.length <= this.groupIndex * 4) {
        this.$message.error('已经到最后了')
      } else {
        this.groupIndex = this.groupIndex + 1
        if (
          this.mapServices.length <=
          this.groupIndex * 4
        ) {
          this.showServiceList = [
            ...this.mapServices
          ].slice(this.groupIndex * 4 - 4)
        } else {
          this.showServiceList = [
            ...this.mapServices
          ].slice(
            this.groupIndex * 4 - 4,
            this.groupIndex * 4
          )
        }
      }
    },
    leftShow() {
      if (this.groupIndex === 1) {
        this.$message.error('已经到最前面了')
      } else {
        this.groupIndex = this.groupIndex - 1
        this.showServiceList = [...this.mapServices].slice(
          this.groupIndex * 4 - 4,
          this.groupIndex * 4
        )
      }
    },
    dataListRightShow(value) {
      if (value) {
        if (
          value.dataList.length <=
          value.currentPage * 4
        ) {
          this.$message.error('已经到最后了')
        } else {
          value.currentPage += 1
          if (
            value.dataList.length <=
            value.currentPage * 4
          ) {
            value.showDataList = value.dataList.slice(
              value.currentPage * 4 - 4
            )
          } else {
            value.showDataList = value.dataList.slice(
              value.currentPage * 4 - 4,
              value.currentPage * 4
            )
          }
        }
      } else {
        if (
          this.dataList.length <=
          this.dataListGroupIndex * 4
        ) {
          this.$message.error('已经到最后了')
        } else {
          this.dataListGroupIndex =
            this.dataListGroupIndex + 1
          if (
            this.dataList.length <=
            this.dataListGroupIndex * 4
          ) {
            this.showDataList = [...this.dataList].slice(
              this.dataListGroupIndex * 4 - 4
            )
          } else {
            this.showDataList = [...this.dataList].slice(
              this.dataListGroupIndex * 4 - 4,
              this.dataListGroupIndex * 4
            )
          }
        }
      }
    },
    dataListLeftShow(value) {
      if (value) {
        if (value.currentPage === 1) {
          this.$message.error('已经到最前面了')
        } else {
          value.currentPage -= 1
          value.showDataList = value.dataList.slice(
            value.currentPage * 4 - 4,
            value.currentPage * 4
          )
        }
      } else {
        if (this.dataListGroupIndex === 1) {
          this.$message.error('已经到最前面了')
        } else {
          this.dataListGroupIndex =
            this.dataListGroupIndex - 1
          this.showDataList = [...this.dataList].slice(
            this.dataListGroupIndex * 4 - 4,
            this.dataListGroupIndex * 4
          )
        }
      }
    },
    mapOpenFun() {
      if (this.isShrink) {
        if (this.oldAllDataList.length) {
          this.allDataList = this.oldAllDataList
          this.oldAllDataList = []
        }
        this.isShrink = false
      } else {
        if (this.allDataList.length) {
          this.oldAllDataList = this.allDataList
          this.allDataList = []
        }
        this.isShrink = true
      }
    },
    openFun(index) {
      if (this.isShrink) {
        if (this.oldDataIndex > -1) {
          const tempObj =
            this.allDataList[this.allDataList.length - 1]
          this.allDataList.pop()
          this.allDataList.splice(
            this.oldDataIndex,
            0,
            tempObj
          )
          this.oldDataIndex = -1
        }
        this.isShrink = false
      } else {
        const lastIndex = this.allDataList.length - 1
        if (lastIndex !== index) {
          const arr = this.allDataList[index]
          this.allDataList.splice(index, 1)
          this.allDataList.push(arr)
          this.oldDataIndex = index
        }
        this.isShrink = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.bottom-tab-box {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);

  .el-scrollbar {
    height: 100%;

    ::v-deep {
      .el-scrollbar__wrap {
        overflow-x: hidden;
        margin-bottom: 0 !important;

        .el-scrollbar__view {
          height: 100%;
        }
      }
    }
  }
}

//.bottom-tab-box::-webkit-scrollbar {
//  width: 0;
//}

.shrink {
  height: 53px;
  overflow: hidden;
}

.bottom-tab {
  //width: 760px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
}
.right-service__wrapper {
  //justify-content: center;
  display: flex;
  flex-direction: row;
  position: relative;
  margin-top: 13px;

  ::v-deep {
    .el-input.is-disabled .el-input__inner {
      cursor: default;
    }

    .el-input__inner {
      background-color: transparent;
      background-image: url('~@/assets/img/select@2x.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      color: white;
      border: none;
      text-align: center;
    }
  }
}

.right-service {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .service-item {
    position: relative;
    width: 138px;
    height: 35px;
    cursor: pointer;
    color: white;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('~@/assets/img/history-imagery-background.png')
      no-repeat;
    background-size: 100% 100%;

    &:not(:last-of-type) {
      margin-right: 9px;
    }

    &.active-item {
      color: #fefefe;
      font-weight: bold;
      background: url('~@/assets/img/history-imagery-active-background.png')
        no-repeat;
      background-size: 100% 100%;
    }

    &.disabled-item {
      cursor: not-allowed;
    }
  }

  .left-right {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    line-height: 25px;
    cursor: pointer;

    &:first-of-type {
      margin-right: 10px;
    }

    &:last-of-type {
      margin-left: 10px;
    }
  }
}
</style>
